<template>
  <div class="dashboard">
    <!-- 一、生产单号的滚动展示区域 -->
    <div class="block text-center sameDayS" style="margin-bottom: 30px">
      <!-- 切换按钮 -->
      <!-- <div style="margin-bottom: 20px">
        <el-button @click="showPartOne">显示 Part One</el-button>
        <el-button @click="showPartTwo">显示 Part Two</el-button>
      </div> -->

      <!-- <el-carousel trigger="click" :autoplay="false" style="height: 320px"> -->
      <!-- part one -->
      <!-- <el-carousel-item> -->
      <!-- <div v-if="currentPart === 'partOne'"> -->
      <el-row>
        <!-- 正在生产 In progress -->
        <el-col :span="8">
          <!-- <el-col :span="8" v-if="statusGroups3['正在生产'].numbers.length > 0"> -->
          <div
            class="panel"
            v-for="(statusData3, status) in statusGroups3"
            :key="status"
          >
            <h3 style="color: YELLOW">
              {{ $t("workfloor.InPproduction") }}
            </h3>
            <div class="scroll-container">
              <div class="nodata" v-if="statusData3?.numbers.length == 0">
                暂无数据
              </div>
              <div v-else>
                <div
                  v-for="(item, index) in statusData3?.numbers"
                  :key="index"
                  class="status-item"
                >
                  <div class="status-row2">
                    <span>
                      {{ $t("productionDetails.productionNumber") }}:
                      {{ item.productionNumber.slice(5) }}
                    </span>
                    <span>
                      {{ $t("productionDetails.batchNumber") }}:
                      {{ item.batchNumber }}
                    </span>
                    <span>
                      {{ $t("productionDetails.productName") }}:
                      {{ item.productName }}
                    </span>
                    <span>
                      {{ $t("productionDetails.productionCylinder") }}:
                      {{ item.productionCylinder }}
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-col>

        <!-- 未生产 upcoming-->
        <el-col :span="8">
          <div
            class="panel"
            v-for="(statusData2, status) in statusGroups2"
            :key="status"
          >
            <h3 style="color: #003e8069">
              {{ $t("workfloor.unproduced") }}
            </h3>
            <div class="scroll-container">
              <div class="nodata" v-if="statusData2.numbers.length == 0">
                暂无数据
              </div>
              <div v-else>
                <div
                  v-for="(item, index) in statusData2.numbers"
                  :key="index"
                  class="status-item"
                >
                  <div class="status-row2" style="font-size: 18px">
                    <span>
                      {{ $t("productionDetails.productionNumber") }}:
                      {{ item.productionNumber.slice(5) }}
                    </span>
                    <span>
                      {{ $t("productionDetails.batchNumber") }}:
                      {{ item.batchNumber }}
                    </span>
                    <span>
                      {{ $t("productionDetails.productName") }}:
                      {{ item.productName }}
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-col>

        <!-- 已生产 Completed -->
        <el-col :span="8">
          <!-- <el-col :span="8" v-if="statusGroups1['已生产'].numbers.length > 0"> -->
          <div
            class="panel"
            v-for="(statusData1, status) in statusGroups1"
            :key="status"
          >
            <h3 style="color: GREEN">{{ $t("workfloor.produced") }}</h3>
            <div class="scroll-container">
              <div class="nodata" v-if="statusData1.numbers.length == 0">
                暂无数据
              </div>
              <div v-else>
                <div
                  v-for="(item, index) in statusData1.numbers"
                  :key="index"
                  class="status-item"
                >
                  <div class="status-row">
                    <div>
                      {{ $t("productionDetails.productionNumber") }}:
                      {{ item.productionNumber.slice(5) }}
                    </div>
                    <div>
                      {{ $t("productionDetails.batchNumber") }}:
                      {{ item.batchNumber }}
                    </div>
                    <!-- <p>
                          {{ $t("productionDetails.productName") }}:
                          {{ item.productName }}
                        </p>
                        <p>
                          {{ $t("productionDetails.totalWeight") }}:
                          {{ item.totalWeight }} kg
                        </p>
                        <p>
                          {{ $t("productionDetails.productionCylinder") }}:
                          {{ item.productionCylinder }} kg
                        </p> -->
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
      <!-- </div> -->
      <!-- </el-carousel-item> -->
      <!-- part two -->
      <!-- <el-carousel-item> -->
      <!-- Part Two -->
      <!-- <div v-if="currentPart === 'partTwo'"> -->
      <!-- <div class="panel">
        <div ref="chartRef" style="width: 100%; height: 300px"></div>
      </div> -->
      <!-- </div> -->
      <!-- </el-carousel-item> -->
      <!-- </el-carousel> -->
    </div>

    <!-- 二、设备展示部分 -->
    <el-tabs v-model="activeName" class="demo-tabs" type="card" @tab-click="handleClick">
      <el-tab-pane label="详情图" name="first">
        <div class="sameDayS">
          <el-row>
            <!-- 7K -->
            <el-col :span="12">
              <div
                  class="device-box"
                  style="background-image: url('/images/7K10K.jpg')"
              >
                <div class="name_lamp">
                  <h3 @click="nameBtn(list7k.url, list7k.lineNo)">7K</h3>
                  <div v-if="list7k.redlamp !== null">
                    <div class="totollamp" @click="warninglightBtn">
                  <span class="redlamp" v-if="list7k.redlamp != 0">
                    {{ list7k.redlamp }}
                  </span>
                    </div>
                  </div>
                </div>
                <!-- Status -->
                <p class="status_light">
              <span class="qianColor" style="margin-right: 5px">
                {{ $t("deviceDetails.deviceStatus") }} </span
              >:
                  <span
                      class="status_light"
                      v-if="T7K.T7K_FrequencyConverter_Running == true"
                  >
                <i class="greenstatus"></i>
                    <!-- {{ $t("deviceDetails.on") }} -->
              </span>
                  <span
                      class="status_light"
                      v-if="T7K.T7K_FrequencyConverter_Running == false"
                  >
                <i class="greystatus"></i>
                    <!-- {{ $t("deviceDetails.off") }} -->
              </span>
                </p>

                <!-- Stage -->
                <p>
              <span class="qianColor">{{
                  $t("deviceDetails.currentStep")
                }}</span>
                  : <span class="houColor">{{ list7k.step }}</span>
                </p>
                <!-- Just indicate the product name -->
                <p>{{ T7K.T7K_MaterialName || " " }}&nbsp;</p>

                <!-- <p>
                  <span class="qianColor">{{ $t("tasksheet.matlDes") }}</span>
                  : <span class="houColor">{{ T7K.T7K_MaterialName }}</span>
                </p> -->

                <!-- PWO: -->
                <p>
              <span class="qianColor">{{
                  $t("deviceDetails.currentProductionNumber")
                }}</span>
                  : <span class="houColor">{{ T7K.T7K_PwsNo }}</span>
                </p>
                <!-- Batch: -->
                <p>
                  <span class="qianColor">{{ $t("deviceDetails.batchNo") }}</span>
                  : <span class="houColor">{{ T7K.T7K_BatchNo }}</span>
                </p>
                <!-- Start Time: -->

                <p>
                  <span class="qianColor">{{ $t("tasksheet.startTime") }}</span>
                  : <span class="houColor">{{ T7K.T7K_timestamp }}</span>
                </p>
                <!-- Weight: -->
                <p>
              <span class="qianColor">{{
                  $t("deviceDetails.bottleWeight")
                }}</span>
                  : <span class="houColor">{{ T7K.T7K_WEGT }} Kg</span>
                </p>
                <!-- Speed : -->
                <p>
                  <span class="qianColor">{{ $t("deviceDetails.speed") }}</span>
                  :
                  <span class="houColor">{{ T7K.T7K_RSpeedActualValue }} RPM</span>
                </p>

                <!-- IC -->
                <p>
                  <span class="qianColor">{{ $t("deviceDetails.operator") }}</span>
                  : <span class="houColor">{{ list7k.operator }}</span>
                </p>
                <!-- Member: -->
                <p>
              <span class="qianColor">{{
                  $t("deviceDetails.controlTeamMembers")
                }}</span>
                  :
                  <span class="houColor">{{
                      list7k.controlTeamMembers?.join(", ")
                    }}</span>
                </p>

                <!-- frequency  - Hide -->
                <!-- <p>
                  <span class="qianColor">{{
                    $t("deviceDetails.disperseFrequency")
                  }}</span>
                  :
                  <span class="houColor"
                    >{{ T7K.T7K_FrequencyActualValue }} Hz</span
                  >
                </p> -->
              </div>
            </el-col>

            <!-- 10K -->
            <el-col :span="12">
              <div
                  class="device-box"
                  style="background-image: url('/images/7K10K.jpg')"
              >
                <div class="name_lamp">
                  <h3 @click="nameBtn(list10k.url, list10k.lineNo)">10K</h3>
                  <div v-if="list10k.redlamp !== null">
                    <div class="totollamp" @click="warninglightBtn">
                  <span class="redlamp" v-if="list10k.redlamp != 0">
                    {{ list10k.redlamp }}
                  </span>
                    </div>
                  </div>
                </div>
                <!-- Status -->
                <p class="status_light">
              <span class="qianColor" style="margin-right: 5px">
                {{ $t("deviceDetails.deviceStatus") }}
              </span>
                  :
                  <span
                      class="status_light"
                      v-if="T10K.T10K_FrequencyConverter_Running == true"
                  >
                <i class="greenstatus"></i>
                    <!-- {{ $t("deviceDetails.on") }} -->
              </span>
                  <span
                      class="status_light"
                      v-if="T10K.T10K_FrequencyConverter_Running == false"
                  >
                <i class="greystatus"></i>
                    <!-- {{ $t("deviceDetails.off") }} -->
              </span>
                </p>

                <!-- Stage: -->
                <p>
              <span class="qianColor">{{
                  $t("deviceDetails.currentStep")
                }}</span>
                  : <span class="houColor">{{ list10k.step }}</span>
                </p>
                <!-- Just indicate the product name -->
                <p>{{ T10K.T10K_MaterialName || " " }}&nbsp;</p>
                <!-- <p>
                  <span class="qianColor">{{ $t("tasksheet.matlDes") }}</span>
                  : <span class="houColor">{{ T10K.T10K_MaterialName }}</span>
                </p> -->
                <!-- PWO: -->
                <p>
              <span class="qianColor">{{
                  $t("deviceDetails.currentProductionNumber")
                }}</span>
                  : <span class="houColor">{{ T10K.T10K_PwsNo }}</span>
                </p>
                <!-- Batch: -->
                <p>
                  <span class="qianColor">{{ $t("deviceDetails.batchNo") }}</span>
                  : <span class="houColor">{{ T10K.T10K_BatchNo }}</span>
                </p>
                <!-- Start Time: -->
                <p>
                  <span class="qianColor">{{ $t("tasksheet.startTime") }}</span>
                  : <span class="houColor">{{ T10K.T10K_timestamp }}</span>
                </p>
                <!-- Weight: -->
                <p>
              <span class="qianColor">{{
                  $t("deviceDetails.bottleWeight")
                }}</span>
                  : <span class="houColor">{{ T10K.T10K_WEGT }} Kg</span>
                </p>
                <!-- frequency  - Hide -->
                <!-- <p>
                  <span class="qianColor">{{
                    $t("deviceDetails.disperseFrequency")
                  }}</span>
                  :
                  <span class="houColor"
                    >{{ T10K.T10K_FrequencyActualValue }} Hz</span
                  >
                </p> -->
                <!-- Speed : -->
                <p>
                  <span class="qianColor">{{ $t("deviceDetails.speed") }}</span>
                  :
                  <span class="houColor"
                  >{{ T10K.T10K_RSpeedActualValue }} RPM</span
                  >
                </p>
                <!-- IC -->
                <p>
                  <span class="qianColor">{{ $t("deviceDetails.operator") }}</span>
                  : <span class="houColor">{{ list10k.operator }}</span>
                </p>
                <!-- Member: -->
                <p>
              <span class="qianColor">{{
                  $t("deviceDetails.controlTeamMembers")
                }}</span>
                  :
                  <span class="houColor">{{
                      list10k.controlTeamMembers?.join(", ")
                    }}</span>
                </p>
              </div>
            </el-col>
          </el-row>

          <el-row>
            <!-- T3 -->
            <el-col :span="12">
              <div
                  class="device-box"
                  style="background-image: url('/images/T3T4.jpg')"
              >
                <div class="name_lamp">
                  <h3 @click="nameBtn(listT3.url, listT3.lineNo)">T3</h3>
                  <div v-if="listT3.redlamp !== null">
                    <div class="totollamp" @click="warninglightBtn">
                  <span class="redlamp" v-if="listT3.redlamp != 0">
                    {{ listT3.redlamp }}
                  </span>
                    </div>
                  </div>
                </div>

                <!-- Status: -->
                <p class="status_light">
              <span class="qianColor" style="margin-right: 5px">
                {{ $t("deviceDetails.deviceStatus") }} </span
              >:
                  <span
                      class="status_light"
                      v-if="T3.T3_FrequencyConverter_Running == true"
                  >
                <i class="greenstatus"></i>
                    <!-- {{ $t("deviceDetails.on") }} -->
              </span>
                  <span
                      class="status_light"
                      v-if="T3.T3_FrequencyConverter_Running == false"
                  >
                <i class="greystatus"></i>
                    <!-- {{ $t("deviceDetails.off") }} -->
              </span>
                </p>
                <!-- Stage: -->
                <p>
              <span class="qianColor">{{
                  $t("deviceDetails.currentStep")
                }}</span>
                  : <span class="houColor">{{ listT3.step }}</span>
                </p>
                <!-- Just indicate the product name -->
                <p>{{ T3.T3_MaterialName || " " }}&nbsp;</p>
                <!-- <p>
                  <span class="qianColor">{{ $t("tasksheet.matlDes") }}</span>
                  : <span class="houColor">{{ T3.T3_MaterialName }}</span>
                </p> -->
                <!-- PWO: -->
                <p>
              <span class="qianColor">{{
                  $t("deviceDetails.currentProductionNumber")
                }}</span>
                  : <span class="houColor">{{ T3.T3_PwsNo }}</span>
                </p>
                <!-- Batch: -->
                <p>
                  <span class="qianColor">{{ $t("deviceDetails.batchNo") }}</span>
                  : <span class="houColor">{{ T3.T3_BatchNo }}</span>
                </p>
                <!-- Start Time: -->
                <p>
                  <span class="qianColor">{{ $t("tasksheet.startTime") }}</span>
                  : <span class="houColor">{{ T3.T3_timestamp }}</span>
                </p>
                <!-- Weight: -->
                <p>
              <span class="qianColor">{{
                  $t("deviceDetails.bottleWeight")
                }}</span>
                  : <span class="houColor">{{ T3.T3_WEGT }} Kg</span>
                </p>
                <!-- frequency  - Hide -->
                <!--
                <p>
                  <span class="qianColor">{{
                    $t("deviceDetails.disperseFrequency")
                  }}</span>
                  :
                  <span class="houColor">{{ T3.T3_FrequencyActualValue }} Hz</span>
                </p> -->
                <!-- Speed : -->
                <p>
                  <span class="qianColor">{{ $t("deviceDetails.speed") }}</span>
                  : <span class="houColor">{{ T3.T3_RSpeedActualValue }} RPM</span>
                </p>
                <!-- IC -->
                <p>
                  <span class="qianColor">{{ $t("deviceDetails.operator") }}</span>
                  : <span class="houColor">{{ listT3.operator }}</span>
                </p>
                <!-- Member: -->
                <p>
              <span class="qianColor">{{
                  $t("deviceDetails.controlTeamMembers")
                }}</span>
                  :
                  <span class="houColor">{{
                      listT3.controlTeamMembers?.join(", ")
                    }}</span>
                </p>
              </div>
            </el-col>

            <!-- T4 -->
            <el-col :span="12">
              <div
                  class="device-box"
                  style="background-image: url('/images/T3T4.jpg')"
              >
                <div class="name_lamp">
                  <h3 @click="nameBtn(listT4.url, listT4.lineNo)">T4</h3>
                  <div v-if="listT4.redlamp !== null">
                    <div class="totollamp" @click="warninglightBtn">
                  <span class="redlamp" v-if="listT4.redlamp != 0">
                    {{ listT4.redlamp }}
                  </span>
                    </div>
                  </div>
                </div>
                <!-- Status: -->
                <p class="status_light">
              <span class="qianColor" style="margin-right: 5px">
                {{ $t("deviceDetails.deviceStatus") }} </span
              >:
                  <span
                      class="status_light"
                      v-if="T4.T4_FrequencyConverter_Running == true"
                  >
                <i class="greenstatus"></i>
                    <!-- {{ $t("deviceDetails.on") }} -->
              </span>
                  <span
                      class="status_light"
                      v-if="T4.T4_FrequencyConverter_Running == false"
                  >
                <i class="greystatus"></i>
                    <!-- {{ $t("deviceDetails.off") }} -->
              </span>
                </p>

                <!-- Stage: -->
                <p>
              <span class="qianColor">{{
                  $t("deviceDetails.currentStep")
                }}</span>
                  : <span class="houColor">{{ listT4.step }}</span>
                </p>
                <!-- Just indicate the product name -->
                <p>{{ T4.T4_MaterialName || " " }}&nbsp;</p>
                <!-- <p>
                  <span class="qianColor">{{ $t("tasksheet.matlDes") }}</span>
                  : <span class="houColor">{{ T4.T4_MaterialName }}</span>
                </p> -->
                <!-- PWO: -->
                <p>
              <span class="qianColor">{{
                  $t("deviceDetails.currentProductionNumber")
                }}</span>
                  : <span class="houColor">{{ T4.T4_PwsNo }}</span>
                </p>
                <!-- Batch: -->
                <p>
                  <span class="qianColor">{{ $t("deviceDetails.batchNo") }}</span>
                  : <span class="houColor">{{ T4.T4_BatchNo }}</span>
                </p>
                <!-- Start Time: -->
                <p>
                  <span class="qianColor">{{ $t("tasksheet.startTime") }}</span>
                  : <span class="houColor">{{ T4.T4_timestamp }}</span>
                </p>
                <!-- Weight: -->
                <p>
              <span class="qianColor">{{
                  $t("deviceDetails.bottleWeight")
                }}</span>
                  : <span class="houColor">{{ T4.T4_WEGT }} Kg</span>
                </p>
                <!-- frequency  - Hide -->
                <!--       <p>
                  <span class="qianColor">{{
                    $t("deviceDetails.disperseFrequency")
                  }}</span>
                  :
                  <span class="houColor">{{ T4.T4_FrequencyActualValue }} Hz</span>
                </p> -->
                <!-- Speed : -->
                <p>
                  <span class="qianColor">{{ $t("deviceDetails.speed") }}</span>
                  : <span class="houColor">{{ T4.T4_RSpeedActualValue }} RPM</span>
                </p>
                <!-- IC -->
                <p>
                  <span class="qianColor">{{ $t("deviceDetails.operator") }}</span>
                  : <span class="houColor">{{ listT4.operator }}</span>
                </p>
                <!-- Member: -->
                <p>
              <span class="qianColor">{{
                  $t("deviceDetails.controlTeamMembers")
                }}</span>
                  :
                  <span class="houColor">{{
                      listT4.controlTeamMembers?.join(", ")
                    }}</span>
                </p>
              </div>
            </el-col>
          </el-row>

          <el-row>
            <!-- ADS -->
            <el-col :span="12">
              <div
                  class="device-box"
                  style="background-image: url('/images/ADS.png')"
              >
                <div class="name_lamp">
                  <h3 @click="nameBtn(listADS.url, listADS.lineNo)">ADS</h3>
                  <div v-if="listADS.redlamp !== null">
                    <div class="totollamp" @click="warninglightBtn">
                  <span class="redlamp" v-if="listADS.redlamp != 0">
                    {{ listADS.redlamp }}
                  </span>
                    </div>
                  </div>
                </div>

                <!-- Status -->
                <p class="status_light">
              <span class="qianColor" style="margin-right: 5px">
                {{ $t("deviceDetails.deviceStatus") }}
              </span>
                  :
                  <span class="status_light" v-if="ADS.ads_plc_status == true">
                <i class="greenstatus"></i>
                    <!-- {{ $t("deviceDetails.on") }} -->
              </span>
                  <span class="status_light" v-if="ADS.ads_plc_status == false">
                <i class="greystatus"></i>
                    <!-- {{ $t("deviceDetails.off") }} -->
              </span>
                </p>
                <!-- Stage -->
                <p>
              <span class="qianColor">{{
                  $t("deviceDetails.currentStep")
                }}</span>
                  :
                  <span class="houColor">{{ listADS.step }} </span>
                </p>
                <!-- weight -->
                <p>
              <span class="qianColor">
                {{ $t("deviceDetails.realtimeweight") }}
              </span>
                  :
                  <span class="houColor">{{ ADS.ADS_SCALE1_REALWGHT }} Kg</span>
                </p>
                <!-- Tank No  -->
                <p>
              <span class="qianColor">
                {{ $t("deviceDetails.tankNo") }}
              </span>
                  : <span class="houColor">{{ ADS.TankNo }}</span>
                </p>

                <!-- Just indicate description -->
                <p>{{ ADS.IngreName || " " }}&nbsp;</p>
                <!-- <p>
                  <span class="qianColor" style="margin-right: 1px">{{
                    $t("ingreVat.ingreName")
                  }}</span>
                  :
                  <span class="houColor" style="margin-left: 1px">
                    {{ ADS.IngreName }}</span
                  >
                </p> -->

                <!-- to hide -->
                <!-- <p>
                  <span class="qianColor" style="margin-right: 1px">{{
                    $t("ingreVat.ingreNo")
                  }}</span>
                  :
                  <span class="houColor" style="margin-left: 1px">
                    {{ ADS.IngreCode }}
                  </span>
                </p> -->

                <!-- Target Tank -->
              </div>
            </el-col>

            <!-- TDS -->
            <el-col :span="12">
              <div
                  class="device-box"
                  style="background-image: url('/images/TDS.jpg')"
              >
                <div class="name_lamp">
                  <h3 @click="nameBtn(listTDS.url, listTDS.lineNo)">TDS</h3>
                  <div v-if="listTDS.redlamp !== null">
                    <div class="totollamp" @click="warninglightBtn">
                  <span class="redlamp" v-if="listTDS.redlamp != 0">
                    {{ listTDS.redlamp }}
                  </span>
                    </div>
                  </div>
                </div>

                <!-- Status -->
                <p class="status_light">
              <span class="qianColor" style="margin-right: 5px">
                {{ $t("deviceDetails.deviceStatus") }}
              </span>
                  :
                  <span class="status_light" v-if="tds.tds_plc_status == true">
                <i class="greenstatus"></i>
                    <!-- {{ $t("deviceDetails.on") }} -->
              </span>
                  <span class="status_light" v-if="tds.tds_plc_status == false">
                <i class="greystatus"></i>
                    <!-- {{ $t("deviceDetails.off") }} -->
              </span>
                </p>
                <!-- Stage -->
                <p>
              <span class="qianColor">{{
                  $t("deviceDetails.currentStep")
                }}</span>
                  : <span class="houColor">{{ listTDS.step }}</span>
                </p>
                <!-- Just indicate description -->
                <!-- weight -->
                <p>
              <span class="qianColor">
                {{ $t("tasksheet.weight") }}
              </span>
                  : <span class="houColor">{{ tds.xxxx }} Kg</span>
                </p>
                <!-- Speed -->
                <p>
                  <span class="qianColor">{{ $t("deviceDetails.speed") }}</span>
                  :
                  <span class="houColor">{{ tds.T7K_RSpeedActualValue }} RPM</span>
                </p>

                <!-- 其余的保持原样 -->
                <p>
              <span class="qianColor">{{
                  $t("tasksheet.premix_temperature")
                }}</span>
                  : <span class="houColor">{{ tds.tds_premix_temperature }}</span>
                </p>
                <p>
                  <span class="qianColor">{{ $t("tasksheet.motor_temp") }}</span>
                  : <span class="houColor">{{ tds.tds_motor_temp }}</span>
                </p>
                <p>
              <span class="qianColor">{{
                  $t("tasksheet.actual_current")
                }}</span>
                  : <span class="houColor">{{ tds.tds_actual_current }}</span>
                </p>
                <!-- <p>
      <span class="qianColor">{{ $t("tasksheet.actual_power") }}</span>
      : <span class="houColor">{{ tds.tds_actual_power }}</span>
    </p> -->
                <p>
                  <span class="qianColor">{{ $t("tasksheet.speed_set") }}</span>
                  : <span class="houColor">{{ tds.tds_speed_set }}</span>
                </p>
                <!-- <p>
      <span class="qianColor">{{ $t("tasksheet.time_set") }}</span>
      : <span class="houColor">{{ tds.tds_time_set }}</span>
    </p> -->
                <p>
                  <span class="qianColor">{{ $t("tasksheet.mixspeed_set") }}</span>
                  : <span class="houColor">{{ tds.tds_mixspeed_set }}</span>
                </p>
                <p>
                  <span class="qianColor">{{ $t("tasksheet.target_set") }}</span>
                  : <span class="houColor">{{ tds.tds_target_set }}</span>
                </p>
                <p>
              <span class="qianColor">{{
                  $t("tasksheet.dischargespeed_set")
                }}</span>
                  : <span class="houColor">{{ tds.tds_dischargespeed_set }}</span>
                </p>
                <p>
                  <span class="qianColor">{{ $t("tasksheet.draintime_set") }}</span>
                  : <span class="houColor">{{ tds.tds_draintime_set }}</span>
                </p>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-tab-pane>
      <el-tab-pane label="缩略图" name="second">
        <DataViews></DataViews>
      </el-tab-pane>
      <el-tab-pane label="柱状图" name="third">
        <TankCharts></TankCharts>
      </el-tab-pane>
    </el-tabs>

  </div>
</template>

<script setup lang="ts">
import { reactive, onMounted, ref } from "vue";
import { getProductData, getNowTankInfo } from "@/api/home.ts";
import DataViews from "@/views/dataViews"
import TankCharts from "@/views/dataViews/TankCharts";
import router from "@/router/index"; //路由跳转
import type { TabsPaneContext } from 'element-plus'

const activeName = ref('first')

const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
}
// 引入webscoket即可
import { ADS, tds, T3, T4, T7K, T10K } from "@/utils/webscoket";
import { watch } from "vue";

watch(tds, (newData) => {
  console.log("ADS数据更新：", newData);
});
const listADS = ref([] as any);
const listTDS = ref([] as any);
const listT3 = ref([] as any);
const listT4 = ref([] as any);
const list7k = ref([] as any);
const list10k = ref([] as any);
const listNPS = ref([] as any);
const getNowTankInfoInfo = () => {
  // 清空 devices 数组
  devices.length = 0;

  getNowTankInfo().then((res: any) => {
    if (res.code == 200) {
      Object.assign(devices, res.data);
      list7k.value = devices[0];
      list10k.value = devices[1];
      listT3.value = devices[2];
      listT4.value = devices[3];
      listADS.value = devices[4];
      listTDS.value = devices[5];
      listNPS.value = devices[6];
    }
  });
};

// 模拟设备数据
const devices = reactive([] as any);

// 模拟不同状态的生产单
const statusGroups1 = reactive({
  已生产: {
    title: "已生产",
    numbers: [],
  },
} as any);
const statusGroups2 = reactive({
  未生产: {
    title: "未生产",
    numbers: [],
  },
} as any);
const statusGroups3 = reactive({
  正在生产: {
    title: "正在生产",
    numbers: [],
  },
} as any);

const nameBtn = (url, lineNo) => {
  // console.log(url, lineNo);
  router.push({ path: url, query: { lineNo } });
};

const warninglightBtn = () => {
  router.push({ path: "system/config" });
};

const getProductDataInfo = () => {
  getProductData().then((res: any) => {
    if (res.code == 200) {
      // statusGroups1["已生产"] = res.data[0];
      // statusGroups2["未生产"] = res.data[1];
      // statusGroups3["正在生产"] = res.data[2];
      res.data[0].numbers.forEach((element) => {
        if (element.batchNumber !== null && element.batchNumber !== "") {
          statusGroups1["已生产"].numbers.push(element);
        }
      });
      res.data[1].numbers.forEach((element) => {
        if (element.batchNumber !== null && element.batchNumber !== "") {
          statusGroups2["未生产"].numbers.push(element);
        }
      });
      res.data[2].numbers.forEach((element) => {
        if (element.batchNumber !== null && element.batchNumber !== "") {
          statusGroups3["正在生产"].numbers.push(element);
        }
      });
    }
  });
};

const startAutoScroll = (statusGroups) => {
  Object.keys(statusGroups).forEach((status) => {
    const scroll = () => {
      const numbers = statusGroups[status]?.numbers;
      if (Array.isArray(numbers) && numbers.length > 1) {
        const firstItem = numbers.shift();
        if (firstItem) numbers.push(firstItem);
      }
      setTimeout(scroll, 2000);
    };
    scroll();
  });
};

// echarts
import * as echarts from "echarts";

// 绑定图表的 DOM 元素
const chartRef = ref<HTMLDivElement | null>(null);

onMounted(async () => {
  await getProductDataInfo();
  await getNowTankInfoInfo();

  await startAutoScroll(statusGroups1);
  await startAutoScroll(statusGroups2);
  await startAutoScroll(statusGroups3);

  if (!chartRef.value) return;

  /* 
  // 初始化 ECharts
  const chart = echarts.init(chartRef.value);

  // 动态生成饼图数据
  const pieData = [
    {
      value: statusGroups1["已生产"]?.numbers.length,
      name: "已生产",
      itemStyle: { color: "green" },
    },
    {
      value: statusGroups2["未生产"]?.numbers.length,
      name: "未生产",
      itemStyle: { color: "#003e8069" },
    },
    {
      value: statusGroups3["正在生产"]?.numbers.length,
      name: "正在生产",
      itemStyle: { color: "yellow" },
    },
  ];

  // 配置饼图
  const option = {
    title: {
      text: "当日生产状态数量统计",
      // subtext: "实时数据",
      left: "center",
    },
    tooltip: {
      trigger: "item",
    },
    legend: {
      orient: "vertical",
      left: "left",
    },
    series: [
      {
        name: "生产状态",
        type: "pie",
        radius: "50%",
        data: pieData,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
      },
    ],
  };

  // 设置配置项
  chart.setOption(option);

  // 监听窗口变化，自动适配大小
  window.addEventListener("resize", () => chart.resize()); */
});
/* 
watch([statusGroups1, statusGroups2, statusGroups3], () => {
  if (!chartRef.value) return;

  const chart = echarts.getInstanceByDom(chartRef.value);
  if (!chart) return;

  // 重新生成带颜色的饼图数据
  const pieData = [
    {
      value: statusGroups1["已生产"]?.numbers.length,
      name: "已生产",
      itemStyle: { color: "#008eff" },
    },
    {
      value: statusGroups2["未生产"]?.numbers.length,
      name: "未生产",
      itemStyle: { color: "#003e8069" },
    },
    {
      value: statusGroups3["正在生产"]?.numbers.length,
      name: "正在生产",
      itemStyle: { color: "#35ba08" },
    },
  ];

  // 更新图表配置
  chart.setOption({
    series: [
      {
        data: pieData,
      },
    ],
  });
});
 */
// ==============
// const currentPart = ref('partTwo'); // 默认显示 Part One

// const showPartOne = () => {
//   currentPart.value = "partOne";
// };
// const showPartTwo = () => {
//   currentPart.value = "partTwo";
// };
</script>

<style scoped>
.dashboard {
  padding: 20px;
  background-color: #85a4bdad;
}

.sameDayS {
  background-color: #93aec5;
  border-radius: 10px;
  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2);
  padding: 10px;
}
.sameDayS p {
  font-size: 18px;
}
.status-row[data-v-b301384e] {
  font-size: 18px;
}

/* 一、生产单号的滚动展示区域  */
/* 已生产/未生产/正在生产 */
.panel {
  background-size: cover;
  background-position: center;
  padding: 20px;
  margin: 10px;
  border-radius: 8px;
  background-blend-mode: overlay;
  background-color: #c6daec;
  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.panel:hover {
  box-shadow: 8px 8px 16px rgba(0, 0, 0, 0.2);
  transform: translateY(-4px);
}
.panel h3 {
  margin: 0 0 10px;
  font-size: 24px;
  font-weight: bold;
  color: #f49800;
}

.scroll-container {
  height: 190px;
  overflow: hidden;
  position: relative;
}

.status-item {
  transition: transform 0.5s ease-in-out;
  border-bottom: 1px dashed #eee;
  padding-bottom: 8px;
  margin-bottom: 8px;
}

.status-item:last-child {
  border-bottom: none; /* 最后一个item不显示分割线 */
}

.status-item p {
  color: #003cca;
}

.status-row {
  font-size: 14px;
  width: 100%;
  display: flex;
  justify-content: space-around;
}

.status-row2 {
  display: flex;
  flex-direction: column; /* 将元素垂直排列 */
  align-items: flex-start; /* 左对齐 */
  justify-content: center;
  height: 80px;
}

.status-row el-text {
  display: block;
  text-align: left;
  color: #000;
}

/* 二、设备展示部分 */
.device-box {
  background-size: cover;
  background-position: center;
  padding: 20px;
  margin: 10px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  background-blend-mode: overlay;
  height: 450px;
  font-size: 30px;
}
.device-box h3 {
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: bold;
  font-size: 30px;
  color: #5f53db;
}
.device-box p {
  margin: 5px 0;
  font-size: 14px;
  font-size: 20px;
  color: #161386e4;
}

.name_lamp {
  display: flex;
  /* justify-content: space-between; */
  width: 100%;
}
.name_lamp h3 {
  color: #ff8927;
}

.totollamp {
  display: flex;
  width: 100%;
  margin-left: 20px;
}
.redlamp {
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border-radius: 50%;
  background-color: red;
  color: white;
}

.status_light {
  display: flex;
  align-items: center;
}
.greenstatus {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 5px;
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: green;
}

/* 里面没有原料-蓝色Empty 
有原料进行中-黄色In Propgress
异常 维修  红色 On-Hold 
已经完成里面游戏 Cpmplete 青色 */
.greystatus {
  margin: 0 5px;
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: grey;
}

.redstatus {
  margin: 0 5px;
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: red;
}

.yellowstatus {
  margin: 0 5px;
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: rgb(235, 196, 50);
}

/* 暂无数据 */
.nodata {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  font-size: 16px;
  font-weight: 400;
  color: #666;
}

.qianColor {
  color: #000;
}
.houColor {
  color: #0043ff;
}
</style>
